<template>
	<view class="all">
		 <view class="xuanzhejine">请选择你要充值的金额</view>
		 <view class="jine">
			 <view v-for="(item,index) in jine" class="dangejine" data-index="{{index}}" @click="xje" :style="{background:beijing[index]}">
					  <view class="chong">充{{item.a}}</view>
				      <view>送{{item.b}}</view>
			 </view>
		 </view>
		 <image src="@/static/logo.png" class="erweima"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jine:[{a:500,b:100},{a:1000,b:300},{a:3000,b:1000},{a:10000,b:4000}],
				beijing:["antiquewhite","antiquewhite","antiquewhite","antiquewhite"]
			}
		},
		methods: {
			xje(event){ 
				
				if(this.beijing[event.currentTarget.dataset.index]=="antiquewhite")
				  {
				      this.beijing.forEach((item,index)=>{
						        if(item=="red"&&index!=event.currentTarget.dataset.index)
								 this.$set(this.beijing,index,"antiquewhite")
					 })
					 this.beijing[event.currentTarget.dataset.index]="red"
				  }
			}
		}
	}
</script>

<style>
 .all{
	 position: absolute;
	  width: 601rpx;
	 height: 378rpx;
	 margin-left:150rpx ;
	 top: 0%;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
 }
 .xuanzhejine{
	 margin-top: 40rpx;
	 font-size: 40rpx;
	 text-align: center;
 }
 .jine{
	 margin-top: 30rpx;
	 display: flex;
	 flex-direction: row;
	 align-items: center;
	
 }
 .dangejine{
	 width: 100rpx;
	 height: 100rpx;
	 text-align: center;
	 border: 1rpx solid aquamarine;
	 font-size: 20rpx;
	line-height: 50rpx;
	margin-left: 20rpx;
 }
 .erweima{
	 width: 90rpx;
	 height: 90rpx;
	 margin-top: 30rpx;
 }
	 
 
 
</style>
